<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>可拖动按钮</title>
  <style>
    body {
      margin: 0;
    }

    #draggable_window {
      position: fixed;
      top: 10px;
      left: 10px;
      width: 300px;
      height: 200px;
      background: royalblue;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      overflow: hidden;
    }

    #draggable_window span {
      display: block;
      background: background linear-gradient(180deg, #fff, #ddd);
      text-align: center;
      color: #000;
      line-height: 2;
      user-select: none;
    }

    #draggable_button {
      position: fixed;
      z-index: 10000;
      right: 20px;
      bottom: 20px;
      display: block;
      text-align: center;
      width: 56px;
      height: 56px;
      line-height: 56px;
      color: #fff;
      background: royalblue;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      overflow: hidden;
    }
  </style>

  <!--  <script src="https://cdn.staticfile.org/vConsole/3.3.2/vconsole.min.js"></script>-->
  <!--  <script>var vConsole = new VConsole();</script>-->
</head>
<body>
  <div id="draggable_window">
    <span>鼠标可拖动标题栏</span>
  </div>

  <div id="draggable_button" title="仅限触屏设备">拖动</div>

  <script src="draggable-mouse.js"></script>
  <script src="draggable-touch.js"></script>
  <script>
    var draggableWindowBar = document.querySelector('#draggable_window>span');
    var draggableWindow = document.getElementById('draggable_window');
    setDraggableMouse(draggableWindowBar, draggableWindow)

    var draggableButton = document.getElementById('draggable_button');
    setDraggableTouch(draggableButton, function (e) {
      alert(e)
    })
  </script>
</body>
</html>
